<template>
  <div class="app-container">
    <el-dialog
      title="添加或编辑"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false">
      <el-form ref="form" :model="dataForm" :rules="rules" label-width="80px">
        <el-form-item label="类型">
          <el-radio-group v-model="dataForm.menuType" style="margin-bottom: 30px;">
            <el-radio-button label="0">目录</el-radio-button>
            <el-radio-button label="1">菜单</el-radio-button>
            <el-radio-button label="2">按钮</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="dataForm.menuType === '0'" label="目录名称" prop="menuTitle">
          <el-input v-model="dataForm.menuTitle" placeholder="请输入目录名称"></el-input>
        </el-form-item>
        <el-form-item v-if="dataForm.menuType === '1'" label="菜单名称" prop="menuTitle">
          <el-input v-model="dataForm.menuTitle" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item v-if="dataForm.menuType === '2'" label="按钮名称" prop="menuTitle">
          <el-input v-model="dataForm.menuTitle" placeholder="请输入按钮名称"></el-input>
        </el-form-item>
        <el-form-item v-if="dataForm.menuType !== '2'" label="路由路径" prop="menuPath">
          <el-input v-model="dataForm.menuPath" placeholder="请输入路由路径"></el-input>
        </el-form-item>
        <el-form-item v-if="dataForm.menuType !== '2'" label="路由名称" prop="menuName">
          <el-input v-model="dataForm.menuName" placeholder="请输入路由名称"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" prop="parentId">
          <el-cascader
            v-model="parentIds"
            :options="upMenus"
            :props="{ expandTrigger: 'hover', value: 'id', label: 'menuTitle', checkStrictly: true }"
            @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item v-if="dataForm.menuType === '1'" label="菜单路由" prop="menuUrl">
          <el-input v-model="dataForm.menuUrl" placeholder="请输入菜单路由"></el-input>
        </el-form-item>
        <el-form-item v-if="dataForm.menuType !== '0'" label="授权标识" prop="menuPers">
          <el-input v-model="dataForm.menuPers" placeholder="请输入授权标识,多个用英文逗号隔开"></el-input>
        </el-form-item>
        <el-form-item v-if="dataForm.menuType !== '2'" label="排序号" prop="menuSort">
          <el-input v-model="dataForm.menuSort" placeholder="请输入排序号"></el-input>
        </el-form-item>
        <el-form-item v-if="dataForm.menuType !== '2'" label="菜单图标" prop="menuIcon">
          <el-input v-model="dataForm.menuIcon" placeholder="请输入菜单图标"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveHandler">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import adminMenuApi from '@/api/core/sys/admin-menu'
  export default {
    data () {
      return {
        dialogVisible: false,
        id: 0,
        dataForm: {
          id: '',
          menuName: '',
          parentId: '',
          menuUrl: '',
          menuPers: '',
          menuSort: '',
          menuIcon: '',
          menuType: '0',
          parentIds: ''
        },
        rules: {
          menuName: [
            { required: true, message: '请填写路由名称', trigger: 'blur' }
          ],
          menuTitle: [
            { required: true, message: '请填写菜单标题', trigger: 'blur'}
          ],
          menuPath: [
            { required: true, message: '请填写路由路径', trigger: 'blur'}
          ],
          parentId: [
            { required: true, message: '请填写上级菜单', trigger: 'blur' }
          ]
        },
        upMenus: [],
        parentIds: []
      }
    },
    created () {
      
    },
    methods: {
      init(id) {
        this.id = id
        this.dialogVisible = true
        // 查询上级菜单
        this.queryUpMenus()
        if (this.id) {
          // 查询详情
          this.queryDetail()
        } else {
          this.clearDataForm()
        }
      },
      // 查询详情
      queryDetail() {
        this.clearDataForm()
        adminMenuApi.listById(this.id).then(res => {
          this.dataForm = res.data.info
          if (this.dataForm.menuType === 0) {
            this.dataForm.menuType = '0'
          } else if (this.dataForm.menuType === 1) {
            this.dataForm.menuType = '1'
          } else {
            this.dataForm.menuType = '2'
          }
          var parentIds = this.dataForm.parentIds
          var pp = parentIds.split(",")
          var ps = []
          for (var i=0;i<pp.length;i++) {
            ps.push(parseInt(pp[i]))
          }
          this.parentIds = ps
        }).catch(res => {

        })
      },
      clearDataForm() {
        this.parentIds = []
        this.dataForm = {
            id: '',
            menuName: '',
            parentId: '',
            menuUrl: '',
            menuPers: '',
            menuSort: '',
            menuIcon: '',
            menuType: '0'
          }
      },
      // 查询上级菜单
      queryUpMenus() {
        adminMenuApi.listUpMenus().then(res => {
          this.upMenus = res.data.menus
        }).catch(res => {

        })
      },
      // 下拉框改变触发的方法
      handleChange(val) {
        this.parentIds = val
        this.dataForm.parentId = val[val.length - 1]
      },
      // 确定按钮
      saveHandler() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.dataForm.parentIds = this.parentIds.toString()
            this.dataForm.updateTime = ''
            adminMenuApi.saveOrUpdate(this.dataForm).then(res => {
              if (res.code === 0) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.dialogVisible = false
                this.$emit('refreshDataList')
              }
            }).catch(res => {
              this.$message.error(res.message)
            })
          } else {
            return false;
          }
        })
      }
    }
  }
</script>

<style scoped></style>